<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort-2</title>
</head>
<body>
<table>
    <tr style="border: 1px">
        <td>
            <select id="unAssigned" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
                <option value="se">SE</option>
            </select>
        </td>
        <td>
        </td>
        <td rowspan="4">
            <!--<div id="left2right"> >>> </div>
            <div id="right2left"> <<< </div>-->
            <button id="left2right"> >>> </button><br>
            <button id="right2left"> <<< </button>
        </td>
        <td>
            <select id="assigned" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
            </select>
        </td>
        <td>
            <select id="sort" style="width:150px;height:20px;overflow-y:auto;">
                <option value="asc">升序</option>
                <option value="desc">降序</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select id="unAssigned1" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
                <option value="tl">TL</option>
            </select>
        </td>
        <td>
        </td>
        <td>
            <select id="assigned1" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
            </select>
        </td>
        <td>
            <select id="sort1" style="width:150px;overflow-y:auto;">
                <option value="asc">升序</option>
                <option value="desc">降序</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select id="unAssigned2" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
                <option value="qc">QC</option>
            </select>
        </td>
        <td>
        </td>
        <td>
            <select id="assigned2" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
            </select>
        </td>
        <td>
            <select id="sort2" style="width:150px;height:20px;overflow-y:auto;">
                <option value="asc">升序</option>
                <option value="desc">降序</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select id="unAssigned3" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
                <option value="pg">PG</option>
            </select>
        </td>
        <td>
        </td>
        <td>
            <select id="assigned3" multiple size="1" style="border:0;background:transparent;width:50px;height:20px;overflow-y:auto;">
            </select>
        </td>
        <td>
            <select id="sort3" style="width:150px;height:20px;overflow-y:auto;">
                <option value="asc">升序</option>
                <option value="desc">降序</option>
            </select>
        </td>
    </tr>
</table>

<script src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#assigned").empty();

        $("#left2right").click(function () {  //列表元素向右移动
            let opts = $("#unAssigned :selected");
            if (opts.length == 0) {
                alert("请选择要分配的角色信息");
            } else {
                $("#assigned").append(opts);
            }
        });

        $("#right2left").click(function () { //列表元素向左移动
            let opts = $("#assigned :selected");
            if (opts.length == 0) {
                alert("请选择要撤消的角色信息");
            } else {
                $("#unAssigned").append(opts);
            }
        });
    });
</script>
</body>
</html>
